<template>
	<view class="newTask">
		<view class="taskBox">
			<view class="title">
				{{ itemName }}
			</view>
			<form @submit="formSubmit">
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">标题</view>
						<input style="font-size: 28upx;text-align: right;" placeholder-class="tui-phcolor" class="tui-input" name="taskTitle"
						 placeholder="简短标题" maxlength="50" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">任务要求</view>
						<input style="font-size: 28upx;text-align: right;" placeholder-class="tui-phcolor" class="tui-input" name="taskDesc"
						 placeholder="说明任务要求" maxlength="50" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">任务标签</view>
						<input style="font-size: 28upx;text-align: right;" placeholder-class="tui-phcolor" class="tui-input" name="taskBiaoqian"
						 placeholder="请填写任务标签" maxlength="4" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">任务数量</view>
						<input style="font-size: 28upx;text-align: right;" placeholder-class="tui-phcolor" class="tui-input" name="number"
						 :placeholder="'最低设置' + taskZuiDiNumber + '个'" maxlength="50" type="number" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">每单金额</view>
						<input style="font-size: 28upx;text-align: right;" placeholder-class="tui-phcolor" class="tui-input" name="unit"
						 :placeholder="'最低设置' + taskZuiDiMoney + '元'" maxlength="50" type="text" />
					</view>
				</tui-list-cell>

				<tui-list-cell :hover="false" v-if="classifyName == 'app下载'">
					<view class="tui-line-cell" style="font-size: 28upx;">
						<view class="tui-title">限客户端</view>
						<radio-group class="radio-group" name="downLoadopenWay" style="text-align: right;">
							<label class="tui-radio" @click="selectWaydown(item.id)" v-for="(item,index) in downLoadList" :key='index'>
								<radio :checked="downLoadopenWay == item.id" :value="item.id" color="#5677fc" class="myRadio" />
								<text style="font-size: 28upx;">{{ item.text }}</text>
							</label>
						</radio-group>
					</view>
				</tui-list-cell>


				<tui-list-cell :hover="false">
					<view class="tui-line-cell" style="font-size: 28upx;">
						<view class="tui-title">打开方式</view>
						<radio-group class="radio-group" name="openWay" style="text-align: right;">
							<label class="tui-radio" @click="selectWay(item.id)" v-for="(item,index) in openLists" :key='index'>
								<radio :checked="openWay == item.id" :value="item.id" color="#5677fc" class="myRadio" />
								<text style="font-size: 28upx;">{{ item.text }}</text>
							</label>
						</radio-group>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" v-show="openWay == 1">
					<view class="tui-line-cell">
						<view class="tui-title">链接</view>
						<input style="font-size: 28upx;text-align: right;" placeholder-class="tui-phcolor" class="tui-input" name="link"
						 placeholder="请输入完整链接" maxlength="200" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" v-show="openWay == 2">
					<view class="tui-line-cell">
						<view class="tui-title">口令</view>
						<input style="font-size: 28upx;text-align: right;" placeholder-class="tui-phcolor" class="tui-input" name="word"
						 placeholder="请输入口令" maxlength="200" type="text" />
					</view>
				</tui-list-cell>

				<tui-list-cell :hover="false" v-show="openWay == 3">
					<view class="tui-line-cell">
						<view style="color: #5677FC;font-size: 28upx;">在步骤1中添加需要扫描的二维码图片</view>
					</view>
				</tui-list-cell>
				<view>
					<block v-for="(item, index) in stepList">
						<view style="display: flex;background: #F0F0F0;padding-top: 16upx;padding-bottom: 16upx;">
							<view class="titles" style="width: 85%;">第{{ index + 1 }}步</view>
							<view @click="deleteStep(index)">删除</view>
						</view>
						<view style="display: flex;margin-top: 16upx;margin-bottom: 16upx;">
							<view style="width: 50%;" v-if="logo[index].picture">
								<image style="width: 100%;height: 300upx;" :src="logo[index].picture" @click="uploadImg(index)" />
								<view style="font-size: 28upx;margin-top: 16upx;">
									<switch :data-index="index" @change="switch1Change" />
									<text style="margin-left: 12upx;">设为验证截图</text>
								</view>
							</view>

							<view v-if="!logo[index].picture" @click="uploadImg(index)" style="width: 50%;background: #F0F0F0;text-align: center;padding-top: 100upx;font-size: 40upx;">
								上传截图（可选）
							</view>
							<textarea placeholder="请输入步骤说明" v-model="item.content" style="font-size: 28upx;width: 50%;border: 2upx solid #F0F0F0;margin-left: 16upx;padding: 16upx;"></textarea>
						</view>
					</block>
				</view>
				<view @click="addStep" style="padding: 40upx;background: #F0F0F0;text-align: center;margin-top: 16upx;">+增加步骤</view>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">验证信息</view>
						<input style="font-size: 28upx;text-align: right;" placeholder-class="tui-phcolor" class="tui-input" placeholder="请设置验证信息"
						 maxlength="50" name="yanzhengName" type="text" :value="classifyName1" />
					</view>
				</tui-list-cell>
				<view class="title">其他设置</view>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">任务限时</view>
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{ array[index] }}</view>
						</picker>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">审核限时</view>
						<picker @change="timePickerChange" :value="index_time" :range="time">
							<view class="uni-input">{{ time[index_time] }}</view>
						</picker>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">任务截止</view>
						<picker @change="datePickerChange" :value="index_date" :range="date">
							<view class="uni-input">{{ date[index_date] }}</view>
						</picker>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">备注</view>
						<input style="font-size: 28upx;text-align: right;" placeholder-class="tui-phcolor" class="tui-input" name="taskBeizhu"
						 placeholder="仅自己可见,其他人看不到(选填)" maxlength="50" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">留言</view>
						<input style="font-size: 28upx;text-align: right;" placeholder-class="tui-phcolor" class="tui-input" name="taskLiuyan"
						 placeholder="给客服留言,接单方看不到(选填)" maxlength="50" type="text" />
					</view>
				</tui-list-cell>

				<view style="width: 100%;height: max-content;background: #fefd93;padding: 20upx;" v-if="remark">
					{{remark}}
				</view>

				<view class="footer" style="color: #5677FC;">
					<text @tap="isShowAgree" class="cuIcon" :class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'">我已阅读、理解并同意</text>
					<!-- 协议地址 -->
					<navigator url="/pages/task/xieyi" open-type="navigate">《发布规则》</navigator>
				</view>
				<view style="color: #999999;font-size: 26upx;padding-left: 32upx;margin-top: 16upx;">
					提示：平台禁止发布黄赌毒、谣言及政治等一切法律禁止的内容；另禁发布与平台同性质的软件，拉人信息（加群，加微信，QQ等），违者将冻结账户，谢谢合作！
				</view>
				<view class="tui-btn-box">
					<button class="tui-button-primary" hover-class="tui-button-hover" formType="submit" type="primary" style="color: #FFFFFF;background: #E6325C;">保存</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	const form = require('../../components/tui-validation/tui-validation.js');

	import tuiModal from '../../components/thorui/tui-modal/tui-modal.vue';
	import tuiListCell from '../../components/thorui/tui-list-cell/tui-list-cell.vue';
	import configdata from '@/common/config.js';
	export default {
		components: {
			tuiModal,
			tuiListCell
		},
		data() {
			return {
				itemName: '',
				itemId: '',
				index: '0',
				index_time: '0',
				index_date: '0',
				checkState: 0,
				downLoadopenWay: -1,
				downLoadList: [{
						id: '0',
						text: '不限'
					},
					{
						id: '1',
						text: '限安卓'
					},
					{
						id: '2',
						text: '限苹果'
					}

				],
				array: ['10分钟', '30分钟', '1小时', '6小时', '24小时', '2天', '3天', '5天'],
				array1: ['10', '30', '60', '360', '1440', '2880', '4320', '7200'],
				time: ['12小时', '24小时', '48小时'],
				time1: ['720', '1440', '2880'],
				date: ['3小时后', '6小时后', '12小时后', '18小时后', '1天后', '2天后', '3天后', '6天后', '12天后', '30天后'],
				date1: ['180', '360', '720', '1080', '1440', '2880', '4320', '8640', '17280', '43200'],
				logo: [],
				showAgree: true,
				switch: true,
				classifyName: '',
				classifyName1: '',
				taskZuiDiNumber: 20,
				remark: '',
				taskZuiDiMoney: 0.32,
				openWay: 1,
				stepList: [],
				openLists: [{
						id: '1',
						text: '链接打开'
					},
					{
						id: '2',
						text: '口令打开'
					},
					{
						id: '3',
						text: '扫码打开'
					}
				]
			};
		},
		onLoad(option) {
			this.itemId = option.id;
			this.itemName = option.name;
			this.classifyIcon = localStorage.getItem('classifyIcon');
			this.classifyName = option.classifyName;
			if (option.remark) {
				this.remark = option.remark;
			}
			this.classifyName1 = option.classifyName + '昵称';
			if (option.taskZuiDiMoney != 'null') {
				this.taskZuiDiMoney = option.taskZuiDiMoney;
				this.taskZuiDiNumber = option.taskZuiDiNumber;
			}
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.target.value;
			},
			timePickerChange: function(e) {
				this.index_time = e.target.value;
			},
			datePickerChange: function(e) {
				this.index_date = e.target.value;
			},
			addStep() {
				const step = {};
				step.picture = '';
				step.content = '';
				step.isVerify = '0';
				step.sort = '';
				this.stepList.push(step);
				const icon = {};
				icon.picture = '';
				this.logo.push(icon);
			},
			deleteStep(index) {
				this.stepList.splice(index, 1);
				this.logo.splice(index, 1);
			},
			switch1Change: function(event) {
				var index = event.target.dataset.index;
				var sort1 = event.target.value == true ? '1' : '0';
				this.stepList[index].isVerify = sort1;
			},
			isShowAgree() {
				//是否选择协议
				this.showAgree = !this.showAgree;
			},
			uploadImg(index) {
				let that = this;
				uni.showLoading({
					title: '上传中...'
				});
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						let token = uni.getStorageSync('token');
						uni.uploadFile({
							url: that.config("APIHOST1") + '/alioss/uploadUniApp', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							header: {
								token: token
							},
							name: 'file',
							success: uploadFileRes => {
								that.logo[index].picture = uploadFileRes.data;
								that.stepList[index].picture = uploadFileRes.data;
								that.stepList[index].sort = index;
							}
						});
					}
				});
				uni.hideLoading();
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			selectWaydown: function(id) {
				this.downLoadopenWay = id;
			},
			selectWay: function(id) {
				this.openWay = id;
			},
			formSubmit: function(e) {
				if (this.checkState != 0) return;
				this.checkState = 1;
				uni.showLoading({
					title: '提交中...'
				});
				var that = this;
				//表单规则
				let rules = [{
						name: 'taskTitle',
						rule: ['required'], //可使用区间，此处主要测试功能
						msg: ['请输入标题']
					},
					{
						name: 'number',
						rule: ['required'],
						msg: ['请输入任务数量']
					},
					{
						name: 'number',
						rule: ['number'],
						msg: ['请输入每单金额']
					},
					{
						name: 'unit',
						rule: ['required'],
						msg: ['请输入每单金额']
					},
					{
						name: 'taskBiaoqian',
						rule: ['required'],
						msg: ['请输入每单金额']
					}
				];
				let formData = e.detail.value;
				//进行表单检查
				if (formData) {
					let checkRes = form.validation(formData, rules);
					var auditTime = this.time1[this.index_time];
					var restrictTime = this.array1[this.index];
					var endTime = this.date1[this.index_date];
					let userId = this.$queue.getData('userId');

					if (!checkRes) {
						
						let money = parseFloat(formData.unit);
						let zuidimoney = parseFloat(this.taskZuiDiMoney);
						if (money < zuidimoney) {
							uni.hideLoading();
							this.checkState = 0;
							uni.showToast({
								icon: 'none',
								title: '每单金额不能低于' + this.taskZuiDiMoney + '元'
							});
							return;
						}
						
						if (this.classifyName == 'app下载' && this.downLoadopenWay === -1) {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '请选择客户端下载类别'
							});
							this.checkState = 0;
							return;
						}

						if (!this.stepList.length > 0) {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '图片信息不能为空'
							});
							this.checkState = 0;
							return;
						}
						if (this.openWay === 1) {
							uni.hideLoading();
							this.checkState = 0;
							if (formData.link === '') {
								uni.showToast({
									icon: 'none',
									title: '链接不能为空'
								});
								return;
							}
						} else if (this.openWay === 2) {
							uni.hideLoading();
							this.checkState = 0;
							if (formData.word === '') {
								uni.showToast({
									icon: 'none',
									title: '口令不能为空'
								});
								return;
							}
						}
						if (parseInt(formData.number) < parseInt(this.taskZuiDiNumber)) {
							uni.hideLoading();
							this.checkState = 0;
							uni.showToast({
								icon: 'none',
								title: '任务数量不能低于' + this.taskZuiDiNumber + '个'
							});
							return;
						}
						let data = {
							leaveWord: formData.taskLiuyan,
							remark: formData.taskBeizhu,
							tag: formData.taskBiaoqian,
							classify: this.downLoadopenWay,
							title: formData.taskTitle,
							content: formData.taskDesc,
							taskOriginalPrice: formData.unit,
							taskNum: formData.number,
							label: this.classifyIcon,
							helpTaskDetailss: JSON.stringify(this.stepList),
							openType: formData.openWay,
							openContent: this.openWay == 1 ? formData.link : formData.word,
							openApp: '',
							verifyContent: formData.yanzhengName,
							auditTime: auditTime,
							restrictTime: restrictTime,
							endTimes: endTime,
							userId: userId,
							classifyDetailsId: this.itemId
						};

						let token = uni.getStorageSync('token');
						this.$Request.postJson('/helpTask/saveMyHelpTask', data).then(res => {
							console.log("保存: ",res);
							uni.hideLoading();
							if (res.code === 0) {
								this.checkState = 0;
								uni.showToast({
									title: '提交成功',
									icon: 'none'
								});
								uni.navigateTo({
									url: '/package-task/pages/task/myList'
								});
							} else {
								this.checkState = 0;
								uni.showModal({
									content: res.msg,
									success(ab) {
										if (ab.confirm) {
											if (res.msg === '金额不足，请去充值！') {
												uni.navigateTo({
													url: './recharge'
												});
											}
										}
									}
								});
							}
						});
					} else {
						uni.hideLoading();
						this.checkState = 0;
						uni.showToast({
							title: checkRes,
							icon: 'none'
						});
					}
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		background: #FFFFFF;
	}

	.newTask {
		.footer {
			padding-left: 32upx;
			margin-top: 16upx;
			text-align: center;
			display: flex;
		}

		background: #FFFFFF;

		.taskBox {
			// margin-top: 40rpx;
			background: #ffffff;
			padding: 40rpx 24rpx;

			.title {
				border-bottom: 2upx solid #f2f2f2;
				padding-bottom: 32upx;
				margin-left: 32upx;
				font-size: 38upx;
				font-weight: bold;

				.link {
					margin-left: 32upx;
					color: #5677fc;
					font-size: 28upx;
					font-weight: normal;
				}
			}

			.titles {
				border-bottom: 2upx solid #f2f2f2;
				// padding-bottom: 32upx;
				margin-left: 32upx;
				font-size: 32upx;
				font-weight: bold;

				.link {
					margin-left: 32upx;
					color: #5677fc;
					font-size: 28upx;
					font-weight: normal;
				}
			}
		}

		.tui-line-cell {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2upx solid #f2f2f2;
			padding: 0 0 16upx 0;
		}

		.tui-title {
			line-height: 32rpx;
			min-width: 120rpx;
			flex-shrink: 0;
		}

		.tui-input {
			font-size: 32rpx;
			color: #333;
			padding-left: 20rpx;
			flex: 1;
		}

		// .radio-group {
		// 	margin-left: auto;
		// 	transform: scale(0.8);
		// 	transform-origin: 100% center;
		// 	flex-shrink: 0;
		// }

		.tui-radio {
			display: inline-block;
			padding-left: 28rpx;
			font-size: 36rpx;
			vertical-align: middle;
		}

		.myRadio {
			// height: 16upx;
			// width: 16upx;
			margin-top: 16upx;
			margin-right: 16upx;
		}

		.tui-btn-box {
			padding: 40rpx 50rpx;
			box-sizing: border-box;
		}

		.tui-button-gray {
			margin-top: 30rpx;
		}

		.tui-tips {
			padding: 30rpx;
			color: #999;
			font-size: 24rpx;
		}
	}
</style>
